<template>
    <div class="zt-dialog-solt-3" style="width: 1000px;height: calc(100% - 60px);padding-top: 0px;" v-show="isShow">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="height: calc(100% - 105px);overflow: auto;">
            <div style="display: flex;height: 100%;">
                <div style="flex: 0.8;">
                    <div class="edit-title">台站基础设施</div>

                    <el-row :span="24">
                        <el-col :span="11">
                            <el-form-item label="台站名称:" prop="regionalNodeName">
                                <el-input class="blue-input" style="width: 100%;" v-model="form.regionalNodeName"
                                    placeholder="请输入台站名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="部署地:" prop="locatedAddress" label-width="90px">
                                <el-select v-model="form.locatedAddress" filterable placeholder="部署地"
                                    prop="regionalNodeName" class="zt-input-min rihgt-m5" @change="changeLocatedAddress"
                                    style="width: 120px;font-weight: 600;margin: 0 20px 0 5px;">
                                    <el-option v-for="item in  dict.type.located_address" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="添加机房" style="background-color: #171D2C ;" class="el-form-item-sw">
                        <el-select v-model="form.machineRoomIds" multiple placeholder="请选择" :popper-class="'t-select'"
                            class="ts-select" filterable style="width: 100%;" collapse-tags>
                            <el-option v-for="item in machineRoom" :key="item.machineRoomId"
                                :label="item.machineRoomName" :value="item.machineRoomId"
                                :disabled="item.disabled && !meRoom.includes(item.machineRoomId)">
                            </el-option>
                        </el-select>
                        <div style="max-height: 150px;background-color: #171D2C;overflow: auto;">
                            <el-tag class="room-tag" v-for="item in form.machineRoomIds" :key="item"
                                @click="showRoom(item)"> {{ getName(item) }} </el-tag>
                        </div>
                    </el-form-item>

                    <el-form-item label="添加传感器">
                        <el-select v-model="form.sensorId" clearable placeholder="请选择" :popper-class="'t-select'"
                            class="ts-select" filterable style="width: 100%;" collapse-tags>
                            <el-option v-for="item in sensor" :key="item.sensorId" :label="item.sensorName"
                                :value="item.sensorId" :disabled="item.disabled && !meSensor.includes(item.sensorId)">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="添加摄像头">
                        <el-select v-model="form.cameraIds" multiple placeholder="请选择" :popper-class="'t-select'"
                            class="ts-select" filterable style="width: 100%;" collapse-tags>
                            <el-option v-for="item in camera" :key="item.cameraId" :label="item.cameraName"
                                :value="item.cameraId" :disabled="item.disabled && !meCamera.includes(item.cameraId)">
                            </el-option>

                        </el-select>
                    </el-form-item>

                    <el-form-item label="添加天线" v-if="editId">
                        <el-select v-model="form.antennaIds" multiple placeholder="请选择" :popper-class="'t-select'"
                            class="ts-select" filterable style="width: 100%;" disabled>
                            <el-option v-for="item in antenna" :key="item.antennaId" :label="item.antennaName"
                                :value="item.antennaId">
                                <!-- :disabled="item.disabled && !meAntenna.includes(item.antennaId)" -->
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="现场协管员:">
                        <el-input class="def-input" style="width: 100%;" v-model="form.contacts" />
                        <!-- <el-select v-model="form.contacts" filterable placeholder="请选择负责人" class="zt-input-min rihgt-m5"
                            style="width: 100%;font-weight: 600;margin: 0 20px 0 5px;">
                            <el-option v-for="item in userList" :label="item.nickName"
                                :value="item.userId" />
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <el-input class="def-input" style="width: 100%;" v-model="form.contactPhone" />
                    </el-form-item>
                    <el-form-item label="微信:">
                        <el-input class="def-input" style="width: 100%;" v-model="form.contactWechat" />
                    </el-form-item>
                    <el-form-item label="快递地址:">
                        <el-input class="def-input" style="width: 100%;" v-model="form.deliveryAddress" />
                    </el-form-item>
                    <el-form-item label="备注:" prop="remark">
                        <el-input v-model="form.remark" type="textarea" placeholder="记录台站的相关信息" />
                    </el-form-item>
                </div>


                <!-- 机房配置 -->
                <div style="flex: 1;">
                    <div class="edit-title">台站机房配置</div>
                    <div style="overflow:auto;max-height: calc(100% - 70px);">
                        <edit-room v-if="editRoomId" :machineRoomId="editRoomId" :key="editRoomId"
                            :antennaList="selectAntenna"></edit-room>

                        <!-- <edit-room v-for="item in form.machineRoomIds" :key="item" :machineRoomId="item"
                            :cameraList="indoorCamera" :sensorList="indoorSensor" :radioList="radioStation"
                            :antennaList="selectAntenna" @initSensor="resetSensor" @initCamera="resetCamera"
                            @changeCamera="changeCamera" @changeSensor="changeSensor"
                            @changeAll="changeAll"></edit-room>-->
                    </div>
                </div>
            </div>
        </el-form>
        <div class="zt-solt-end">
            <!-- <jessibuca-bto :url="cameraUrl" title="预览" ></jessibuca-bto> -->
            <div class="flex-left bt-white-text" @click="cancel">取消</div>
            <el-button class="bt-blue flex-right" @click="submitForm">保存</el-button>
        </div>

    </div>
</template>

<script>
import editRoom from "./edit-room.vue";
import { getSelectUser } from "@/api/system/user";
import { getRoomListAll } from "@/api/business/room";// 机房
import { getAntennaListAll } from "@/api/business/antenna";//天线
import { getSensorListAll } from "@/api/business/sensor";//传感器
import { getCameraListAll } from "@/api/business/camera";//摄像头
import { getNode, addNode, updateNode } from "@/api/business/node";
export default {
    name: 'editNode',
    dicts: ['located_address'],
    emits: ['close', 'change'],
    components: { editRoom },
    props: {
        editId: {}
    },
    watch: {
        locatedAddress() {
            this.initRoom();
        },
    },
    computed: {
        locatedAddress() {
            return this.form.locatedAddress
        },
        // 已经选择的天线
        selectAntenna() {
            return this.antenna.filter(item => {
                const list = this.form.antennaIds || []
                return list.includes(item.antennaId)
            })
            // .map(item => {
            //     item.isUsed = '0'
            //     return item;
            // })
        }
    },
    created() {
        if (this.editId) {
            this.init();
        } else {
            this.isShow = true;
        }
        this.initUserList();
    },
    data() {
        return {
            userList: [],
            isShow: false,
            form: {},
            // 表单校验
            rules: {
                regionalNodeName: [
                    { required: true, message: "台站名称不能为空", trigger: "change" }
                ],
                regionalNodeType: [
                    { required: true, message: "台站类型不能为空", trigger: "change" }
                ],
                locatedAddress: [
                    { required: true, message: "部署地不能为空", trigger: "change" }
                ],
                status: [
                    { required: true, message: "状态不能为空", trigger: "change" }
                ],
            },
            meAntenna: [], // 本身的天线,本身的天线本身还可以选择
            meCamera: [], // 本身的摄像头,本身的摄像头本身还可以选择
            meSensor: [], // 本身的传感器,本身的传感器本身还可以选择
            meRoom: [], // 本身的机房,本身的机房本身还可以选择

            machineRoom: [],// 机房,本身显示的数据
            antenna: [],// 天线,本身显示的数据
            camera: [],// 室外摄像头,本身显示的数据
            sensor: [],// 传感器,本身显示的数据

            radioStation: [],// 电台,供机房内选择
            indoorCamera: [],// 室内摄像头,供机房内选择
            indoorSensor: [],// 室内传感器,供机房内选择

            changeList: [], // 变动的机房
            editRoomId: null, // 当前修改的机房id
        }
    },
    methods: {
        // 展示机房修改页面
        showRoom(machineRoomId) {
            if (this.editRoomId == machineRoomId) {
                this.editRoomId = null;
            } else {
                this.editRoomId = machineRoomId;
            }
        },
        // 获取机房名称
        getName(machineRoomId) {
            let m = this.machineRoom.filter(item => item.machineRoomId == machineRoomId);
            let name = "";
            if (m.length > 0) {
                name = m[0].machineRoomName
            }
            return name
        },
        // 存在机房变动事件,用于保存之前的验证如果有机房没有保存则不可以进行保存
        changeAll(machineRoomId, isSave) {
            // 存在变动则添加变动
            if (isSave && !this.changeList.includes(machineRoomId)) this.changeList.push(machineRoomId);
            // 当保存成功之后则删除变动的机房
            if (!isSave && this.changeList.includes(machineRoomId)) {
                const index = this.changeList.indexOf(machineRoomId);
                if (index !== -1) this.changeList.splice(index, 1);
            }
            console.log("存在变动：", this.changeList)
        },
        // 传感器可选数据更新
        resetSensor(list) {
            this.indoorSensor = this.indoorSensor.map(item => {
                if (list.includes(item.sensorId)) item.disabled = false;
                return item;
            })
        },
        // 传感器选择变化事件
        changeSensor(newValue, beforeValue) {
            this.indoorSensor = this.indoorSensor.map(item => {
                if (newValue) {
                    if (newValue.includes(item.sensorId)) item.disabled = true;
                }
                if (beforeValue) {
                    if (beforeValue.includes(item.sensorId)) item.disabled = false;
                }
                return item;
            })
        },
        // 摄像头可选数据更新
        resetCamera(list) {
            this.indoorCamera = this.indoorCamera.map(item => {
                if (list.includes(item.cameraId)) item.disabled = false;
                return item;
            })
        },
        // 摄像头选择变化事件
        changeCamera(newValue, beforeValue) {
            this.indoorCamera = this.indoorCamera.map(item => {
                if (newValue) {
                    if (newValue.includes(item.cameraId)) item.disabled = true;
                }
                if (beforeValue) {
                    if (beforeValue.includes(item.cameraId)) item.disabled = false;
                }
                return item;
            })
        },
        // 页面初始化
        init() {
            // 加载机房、天线、摄像头、传感器、电台数据
            this.changeLocatedAddress();
            this.getDetails();
        },
        // 查询用户
        initUserList() {
            getSelectUser().then(rs => {
                this.userList = rs
            })
        },
        // 部署地变化重新查询部署地的机房、天线、摄像头、以及传感器的数据
        changeLocatedAddress() {
            this.initRoom();
            this.initAntenna();
            this.initCamera();
            this.initSensor();
            // this.initRadio();
        },
        // // 初始化电台
        // initRadio() {
        //     getRadioStationList({ locatedAddress: this.locatedAddress }).then(rs => {
        //         console.log("电台数据：", rs)
        //         this.radioStation = rs.rows.map(item => {
        //             if (item.isUsed != "0") {
        //                 item.disabled = true;
        //             } else {
        //                 item.disabled = false;
        //             }
        //             return item
        //         });
        //     })
        // },
        // 初始化机房数据
        initRoom() {
            if (!this.locatedAddress) return;
            getRoomListAll({ locatedAddress: this.locatedAddress }).then(rs => {
                this.machineRoom = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
            })
        },
        // 初始化天线
        initAntenna() {
            getAntennaListAll({ locatedAddress: this.locatedAddress }).then(rs => {
                this.antenna = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
            })
        },
        // 初始化摄像头
        initCamera() {
            getCameraListAll({ locatedAddress: this.locatedAddress }).then(rs => {
                // 室内外所有的摄像头
                const cameraAll = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
                // 室外摄像头
                this.camera = cameraAll.filter(item => item.inoutType == '1002');
                // 室内摄像头
                // this.indoorCamera = cameraAll.filter(item => item.inoutType == '1001');
            })
        },
        // 初始化传感器
        initSensor() {
            getSensorListAll({ locatedAddress: this.locatedAddress }).then(rs => {
                const sensorAll = rs.rows.map(item => {
                    if (item.isUsed != "0") {
                        item.disabled = true;
                    } else {
                        item.disabled = false;
                    }
                    return item
                });
                // 室外传感器
                this.sensor = sensorAll.filter(item => item.inoutType == '1002');
                // 室内传感器
                // this.indoorSensor = sensorAll.filter(item => item.inoutType == '1001');
            })
        },
        // 查询详情
        getDetails() {
            getNode(this.editId).then(rs => {
                this.fomartNode(rs.data);
            });
        },
        // 格式化台站数据
        fomartNode(node) {
            // 格式化机房
            if (node.pltMachineRoomList) {
                const room = node.pltMachineRoomList.map(item => item.machineRoomId);
                this.meRoom = room;
                node.machineRoomIds = room;
            }
            // 格式化天线
            if (node.pltAntennaList) {
                const antenna = node.pltAntennaList.map(item => item.antennaId);
                this.meAntenna = antenna;
                node.antennaIds = antenna;
            }
            // 格式化摄像头
            if (node.pltCameraList) {
                const camera = node.pltCameraList.map(item => item.cameraId);
                this.meCamera = camera;
                node.cameraIds = camera;
            }
            // 多个格式化传感器
            // if (node.pltSensorList) {
            //     const sensor = node.pltSensorList.map(item => item.sensorId);
            //     this.meSensor = sensor;
            //     node.sensorIds = sensor;
            // }
            // 单个传感器格式化
            if (node.pltSensorList) {
                const sensor = node.pltSensorList.map(item => item.sensorId);
                this.meSensor = sensor;
                if (sensor.length > 0) {

                }
                node.sensorId = sensor[0];
            }
            delete node.pltMachineRoomList;
            delete node.pltAntennaList;
            delete node.pltCameraList;
            delete node.pltSensorList;
            // 变更当前机房是否可以选择
            this.form = node;
            this.isShow = true;
        },
        // 取消事件
        cancel() {
            this.form = {};
            this.$emit('close')
        },
        // 将要提交的数据转为后端需要的格式
        setListAll() {
            //机房
            this.form.pltMachineRoomList = this.form.machineRoomIds ? this.form.machineRoomIds.map(item => ({ machineRoomId: item, isUsed: 1 + "" })) : [];
            // 多个传感器
            // this.form.pltSensorList =  this.form.sensorIds ? this.form.sensorIds.map(item => ({ sensorId: item, isUsed: 1 + "" })) : [];
            // 单个传感器
            let pltSensorList = [];
            if (this.form.sensorId) {
                pltSensorList.push({
                    sensorId: this.form.sensorId,
                    isUsed: '1'
                })
            }
            this.form.pltSensorList = pltSensorList;
            // //摄像头
            this.form.pltCameraList = this.form.cameraIds ? this.form.cameraIds.map(item => ({ cameraId: item, isUsed: 1 + "" })) : [];
            //天线
            // this.form.pltAntennaList = this.form.antennaIds ? this.form.antennaIds.map(item => ({ antennaId: item})) : [];
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (!valid) return;
                // 格式化上传数据
                this.setListAll();
                if (this.form.regionalNodeId != null) {
                    updateNode(this.form).then(rs => {
                        if (rs.code == 200) {
                            this.$message.success("修改成功")
                            this.$emit('change')
                        } else {
                            this.$message.error("修改失败")
                        }
                    }).catch(er => {
                        this.$message.error("修改失败")
                    });
                } else {
                    addNode(this.form).then(rs => {
                        this.$message.success("新增成功");
                        this.$emit('change')
                    });
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.blue-input {
    width: 100px;
}

.node-box-left-yes {
    width: calc(100% - 940px);
}

.node-box-left-no {
    width: 100%;
}

.node-add {
    position: absolute;
    right: 0;
    margin-top: 5px;
    margin-right: 20px;
}

.el-form-item-sw {
    padding: 20px 0px;
}

* {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-style: normal;
}

.edit-title {
    padding-left: 30px;
    height: 70px;
    line-height: 70px;
    background-color: #2C334C;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    font-size: 18px;
    color: #9A9DAA;
    font-style: normal;
    text-transform: none;
    border-left: 2px solid #171D2C;
}

.zt-right-dialog .zt-dialog-solt-3 .zt-solt-end {
    width: 100%;
    padding: 0 40px;
    background: linear-gradient(138deg, #313B53 0%, #272F43 100%);
}

.room-img {
    width: 21px;
    height: 13px;
    vertical-align: bottom;
}

.room-content {
    font-weight: 400;
    font-size: 18px;
    color: #EDEDED;
    margin-left: 10px;
    width: 90px;
    flex: auto;
}

.room-page {
    background-color: #171D2C;
    margin-bottom: 4px;
    padding-top: 20px;
    box-sizing: border-box;
    min-height: 100px;
}

.room-content-text {
    flex: auto;
    width: calc(100% - 90px);
}

.sw-label {
    text-align: left;
    position: relative;
}

.add-crate {
    position: absolute;
    right: -10px;
    top: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer
}

img {
    height: 24px;
    width: 24px;
    margin-right: 4px;
}

span {
    overflow: hidden;
}

.crate-node {
    display: flex;
    margin-bottom: 10px;
}

.delete-device {
    cursor: pointer;
    line-height: 36px;
    color: #FBD580
}

.room-tag {
    background: #2B526F;
    border-radius: 18px;
    height: 36px;
    line-height: 36px;
    border: none;
    color: #FFFFFF;
    margin: 5px 5px 0px 5px;
}

.el-select {
    ::v-deep.is-disabled .el-input__inner {
        background-color: #3a528f;
        cursor: not-allowed;
    }
}

.def-input ::v-deep.el-input__inner {
    background: #394760;
    border: none;
    color: #FFFFFF;
}
</style>